<template>
  <!-- <el-form label-position="right" label-width="80px">
    <el-form-item label="手机号">
      <el-input v-model="userPhone"></el-input>
    </el-form-item>
    <el-form-item label="密码">
      <el-input v-model="password"></el-input>
    </el-form-item>
    <el-button @click="login">登录</el-button>
    <el-button @click="toRegister">没有账号，创建账号</el-button>
  </el-form> -->

  <article>
    <div class="container" :class="{ 'sign-up-active': signUp }">
      <div class="overlay-container">
        <div class="overlay">
          <div class="overlay-left">
            <h2>注册</h2>
            <p>健康宝系统: 高效，简介，可靠</p>
            <button class="invert" id="signIn" @click="signUp = !signUp">
              登录
            </button>
          </div>
          <div class="overlay-right">
            <h2>登录</h2>
            <p>获取更多服务</p>
            <button class="invert" id="signUp" @click="signUp = !signUp">
              注册
            </button>
          </div>
        </div>
      </div>
      <!-- <el-form :ref="userInfo" class="sign-up" label-position="right" label-width="80px" :rules="rules" :model="userInfo"> -->
        <!-- <el-form-item label="手机号" prop="userPhone">
          <el-input v-model="userInfo.userPhone"></el-input>
        </el-form-item>
        <el-form-item label="身份证" prop="idNumber">
          <el-input v-model="userInfo.idNumber"></el-input>
        </el-form-item>
        <el-form-item label="姓名" prop="name">
          <el-input v-model="userInfo.name"></el-input>
        </el-form-item>
        <el-form-item label="密码" prop="password">
          <el-input v-model="userInfo.password"></el-input>
        </el-form-item>
        <el-form-item label="密码" prop="passwordConfirm">
          <el-input v-model="userInfo.passwordConfirm"></el-input>
        </el-form-item>
        <el-form-item label="验证码" prop="token">
          <el-input v-model="userInfo.token"></el-input>
        </el-form-item> -->
        <el-form :ref="userInfo" class="sign-up" :rules="rules" :model="userInfo">
        <el-form-item prop="userPhone">
          <el-input v-model="userInfo.userPhone" placeholder="手机号" prefix-icon="el-icon-mobile-phone" />
        </el-form-item>
        <el-form-item prop="idNumber">
          <el-input v-model="userInfo.idNumber" placeholder="身份证" prefix-icon="el-icon-postcard" />
        </el-form-item>
        <el-form-item prop="name">
          <el-input v-model="userInfo.name" placeholder="姓名" prefix-icon="el-icon-user" />
        </el-form-item>
        <el-form-item prop="password">
          <el-input v-model="userInfo.password" placeholder="密码" prefix-icon="el-icon-lock" show-password />
        </el-form-item>
        <el-form-item prop="passwordConfirm">
          <el-input v-model="userInfo.passwordConfirm" placeholder="确认密码" prefix-icon="el-icon-lock" show-password />
        </el-form-item>
        <el-form-item prop="token">
          <el-input v-model="userInfo.token" placeholder="验证码" prefix-icon="el-icon-warning-outline" @keyup.enter.native="register" />
        </el-form-item>
         <el-button @click="sendVerificationCode" :disabled="!canSendToken">{{verifyLabel}}</el-button>
        <el-button @click="register" :loading="registerLoading">注册</el-button>
      </el-form>
     <el-form class="sign-in" action="#">
        <h2>登录</h2>
        <div>欢迎登录健康宝系统</div>
        <el-input type="phone" placeholder="手机号" v-model="userPhone" prefix-icon="el-icon-mobile-phone" />
        <el-input type="password" placeholder="密码" v-model="password" prefix-icon="el-icon-lock" show-password @keyup.enter.native="login"/>
        <el-link :underline="false" @click="handleForget">忘记密码?</el-link>
        <el-button @click="login" :loading="loginLoading">登录</el-button>
      </el-form>
    </div>
  </article>
</template>

<script>
import { Message } from 'element-ui'

export default {
  data() {
      var validatePass2 = (rule, value, callback) => {
        if (value === '') {
          callback(new Error('请再次输入密码'));
        } else if (value !== this.userInfo.password) {
          callback(new Error('两次输入密码不一致!'));
        } else {
          callback();
        }
      };
    return {
      // 登录和注册的标志位
      verifyTime: 60,
      signUp: false,
      // 登录数据
      userPhone: "",
      password: "",
      // 注册数据
      userInfo :{
        userPhone: "",
        idNumber: "",
        name:"",
        password:"",
        passwordConfirm: '',
        token:""
      },
      rules: {
        userPhone: [
          { required: true, message: '手机号必填', trigger: 'blur' },
          { pattern: /^1[3456789]\d{9}$/, message: '手机号码格式不正确', trigger: 'blur' }
        ],
        idNumber: [
          { required: true, message: '请填写证件号码', trigger: 'blur' },
          {
            pattern: /(^[1-9]\d{5}(18|19|([23]\d))\d{2}((0[1-9])|(10|11|12))(([0-2][1-9])|10|20|30|31)\d{3}[0-9Xx]$)|(^[1-9]\d{5}\d{2}((0[1-9])|(10|11|12))(([0-2][1-9])|10|20|30|31)\d{2}$)/,
            message: '证件号码格式有误！',
            trigger: 'blur'
          }
        ],
        name: [
          { required: true, message: '请输入名字', trigger: 'blur' },
          { min: 1, max: 20, trigger: 'blur' }
        ],
        password: [
          { required: true, message: '请输入密码', trigger: 'blur' },
        ],
        passwordConfirm: [
          { required: true, validator: validatePass2, trigger: 'blur' }
        ],
        token: [
          { required: true, message: '请输入验证码', trigger: 'blur' },
          { pattern: /(^\d{4})/,
            message: '验证码格式不正确',
            trigger: 'blur' 
          }
        ],
      },
      loginLoading: false,
      registerLoading: false
    }
  },
  computed: {
    canSendToken: function() {
      return  this.verifyTime==60 && /^1[3456789]\d{9}$/.test(this.userInfo.userPhone);
    },
    verifyLabel: function(){
      return this.verifyTime==60 ? "发送验证码" : "已发送(" + this.verifyTime + ")"
    }
  },
  methods: {
    login: function(){
      this.loginLoading = true;
      this.$store.dispatch("user/login", {userPhone:this.userPhone, password:this.password})
        .finally(()=>{
          this.loginLoading = false;
        ;})
    },
    register: function(){
      this.registerLoading = true;
      console.log("resgister", this.userInfo);
      this.$refs[this.userInfo].validate((valid) => {
          if (valid) {
            Message.success("成功发送注册信息");
            this.$store.dispatch("user/register", this.userInfo)
              .finally(() => {
                this.registerLoading = false;
              });
          } else {
            Message.error("请正确填写注册信息");
            this.registerLoading = false;
          }
        });
    },
    handleForget: function(){
      Message.warning("请联系管理员修改密码");
    },
    sendVerificationCode: function(){
      console.log("send verifycode: " + this.userPhone);
      this.time();
      this.$store.dispatch("user/send_verification_code", this.userInfo.userPhone);
    },
    time: function() {
        if(this.verifyTime==0) {
            this.verifyTime = 60;
        }else {
            this.verifyTime--;
            setTimeout(()=>{     //倒计时方法
                this.time();
            },1000);    //间隔为1s
        }
    }
  },
  mounted() {
    console.log("can?", this.canSendToken);
  }
}
</script>

<style lang="scss" scoped>
.container {
  position: absolute;
  left: 50%;
  top: 50%;
  margin-left: -450px;
  margin-top: -300px;
  width: 900px;
  height: 600px;
  border-radius: 10px;
  overflow: hidden;
  box-shadow: 0 15px 30px rgba(0, 0, 0, 0.2), 0 10px 10px rgba(0, 0, 0, 0.2);
  background: linear-gradient(to bottom, #efefef, #ccc);
  opacity: 0.8;

  .overlay-container {
    position: absolute;
    top: 0;
    left: 50%;
    width: 50%;
    height: 100%;
    overflow: hidden;
    transition: transform 0.5s ease-in-out;
    z-index: 100;
  }

  .overlay {
    position: relative;
    left: -100%;
    height: 100%;
    width: 200%;
    background: linear-gradient(to bottom right, #8f25d6, #620c94);
    color: #fff;
    transform: translateX(0);
    transition: transform 0.5s ease-in-out;
  }

  @mixin overlays($property) {
    position: absolute;
    top: 0;
    display: flex;
    align-items: center;
    justify-content: space-around;
    flex-direction: column;
    padding: 70px 40px;
    width: calc(50% - 80px);
    height: calc(100% - 140px);
    text-align: center;
    transform: translateX($property);
    transition: transform 0.5s ease-in-out;
  }

  .overlay-left {
    @include overlays(-20%);
  }

  .overlay-right {
    @include overlays(0);
    right: 0;
  }
}

h2 {
  margin: 0;
}

p {
  margin: 20px 0 30px;
}

a {
  color: #222;
  text-decoration: none;
  margin: 15px 0;
  font-size: 1rem;
}

button {
  border-radius: 20px;
  border: 1px solid #8f25d6;
  background-color: #8f25d6;
  color: #fff;
  font-size: 1rem;
  font-weight: bold;
  padding: 10px 40px;
  letter-spacing: 1px;
  text-transform: uppercase;
  cursor: pointer;
  transition: transform 0.1s ease-in;

  &:active {
    transform: scale(0.9);
  }

  &:focus {
    outline: none;
  }
}

button.invert {
  background-color: transparent;
  border-color: #fff;
}

button.verification {
  vertical-align: top;
  border-radius: 15px;
  padding: 5px 20px;
}

button.register {
  display: inline-block;
  vertical-align: top;
  border-radius: 15px;
  padding: 5px 20px;
}

form {
  position: absolute;
  top: 0;
  display: flex;
  align-items: center;
  justify-content: space-around;
  flex-direction: column;
  padding: 90px 60px;
  width: calc(50% - 120px);
  height: calc(100% - 180px);
  text-align: center;
  background: linear-gradient(to bottom, #efefef, #ccc);
  transition: all 0.5s ease-in-out;

  div {
    font-size: 1rem;
  }
}

input {
    background-color: #eee;
    border: none;
    padding: 8px 15px;
    margin: 6px 0;
    width: calc(100% - 30px);
    border-radius: 15px;
    border-bottom: 1px solid #ddd;
    box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.4), 0 -1px 1px #fff,
      0 1px 0 #fff;
    overflow: hidden;

    &:focus {
      outline: none;
      background-color: #fff;
    }
  }

.sign-in {
  left: 0;
  z-index: 2;
}

.sign-up {
  display: block;
  left: 0;
  z-index: 1;
  opacity: 0;
}

.sign-up-active {
  .sign-in {
    transform: translateX(100%);
  }

  .sign-up {
    transform: translateX(100%);
    opacity: 1;
    z-index: 5;
    animation: show 0.5s;
  }

  .overlay-container {
    transform: translateX(-100%);
  }

  .overlay {
    transform: translateX(50%);
  }

  .overlay-left {
    transform: translateX(0);
  }

  .overlay-right {
    transform: translateX(20%);
  }
}

@keyframes show {
  0% {
    opacity: 0;
    z-index: 1;
  }
  49% {
    opacity: 0;
    z-index: 1;
  }
  50% {
    opacity: 1;
    z-index: 10;
  }
}

</style>